<template>
  <div class="dp-data-right-card">
    <div class="box1">
      <div class="avatar"></div>
      <div class="text">
        <p>有任何问题，请联系</p>
        <h3>渠道专属顾问</h3>
      </div>
    </div>
    <div class="box2">
      <div class="left">
        <ul>
          <li v-for="item in 4" :key="item">使用咨询</li>
        </ul>
      </div>
      <div class="right"></div>
    </div>
    <div class="box3"></div>

    <div class="box4">
      <h3>产品动态</h3>

      <ul>
        <li v-for="item in 5" :key="item">
          <span class="s1">11/18</span>
          <span class="s2">商品招生物料更新啦～，快戳！</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dp-data-right-card {
  width: 294px;
  height: 542px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.04);
  margin-left: 20px;
  box-sizing: border-box;
  padding: 20px 0 25px 20px;
  .box1 {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: red;
      margin-right: 15px;
    }
    .text {
      display: flex;
      flex-direction: column;
      p {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #222222;
        line-height: 20px;
        margin: 0;
        margin-bottom: 5px;
      }
      h3 {
        margin: 0;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 22px;
      }
    }
  }
  .box2 {
    box-sizing: border-box;
    margin-bottom: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 20px;
    .left {
      ul,
      li {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      li {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #222222;
        line-height: 20px;
        margin-bottom: 12px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .right {
      box-sizing: border-box;
      padding: 10px;
      width: 120px;
      height: 120px;
      background: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.09);
      border-radius: 6px;
    }
  }
  .box3 {
    width: 255px;
    height: 1px;
    background: #eeeeee;
    margin-bottom: 30px;
  }

  .box4 {
    box-sizing: border-box;
    padding-right: 19px;
    h3 {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 22px;
      margin: 0;
      margin-bottom: 11px;
    }
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    li {
      display: flex;
      box-sizing: border-box;
      padding: 8px 0;
      // border-bottom: 1px dashed #eeeeee;
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        background-image: linear-gradient(
          to right,
          #ccc 0%,
          #ccc 50%,
          transparent 50%
        );
        background-size: 7px 1px;
        background-repeat: repeat-x;
      }
      .s1 {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #cccccc;
        line-height: 22px;
        margin-right: 17px;
      }
      .s2 {
        width: 196px;
        overflow: hidden;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
    }
  }
}
</style>
